import { useState } from "react";
/**
 * 兄弟组件通信 ，发布订阅模式
 *
 * 1. 原生的事件监听，派发
 *
 * 2. mitt第三方库，和vue的事件总线类似
 */

export const BrotherDemo: React.FC = () => {
  const sendData = () => {
    const e = new Event("brother");
    const data = { name: "兄弟组件通信" };
    e.params = data;
    window.dispatchEvent(e);
  };
  return (
    <div>
      <h2>兄弟组件通信</h2>

      <button onClick={sendData}>发送数据</button>
    </div>
  );
};

export const BrotherDemo2: React.FC = () => {
  const [data, setData] = useState<{ name?: string }>({});

  window.addEventListener("brother", (e: Event) => {
    setData(e.params || {});
  });

  return (
    <div>
      <h2>兄弟组件通信--接收数据</h2>
      <div>{JSON.stringify(data)}</div>
      <div>{data?.name}</div>
    </div>
  );
};

// 扩充event类型
// declare global 是 TypeScript 中的一个语法，用于扩展全局命名空间。这意味着在 declare global 块内声明的任何内容都将对整个项目可用
declare global {
  interface Event {
    params?: object;
  }
}
